@import "reset";
@import "footer";
@import "../utils/iconfont.css";

@function getvw($wid){
    @return $wid/750*100 + vw;
}

header{
    .header-message{
        padding: getvw(15) getvw(22) getvw(10); 
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header-logo{
            width:getvw(120);
        }
        .search-box{
            width: getvw(270);
            height: getvw(53);
            border: 2px solid #ff9344;
            border-radius: getvw(26.5);
            font-size: 12px;
            display: flex;
            align-items: center;
            input{
                width: 70%;
                height: 100%;
                border: 0px solid #ff9344;
                outline: none;
                // border-top-left-radius: getvw(26.5);
                // border-bottom-left-radius: getvw(26.5);
                margin-left: getvw(26.5);
            }
            i{
                display: inline-block;
                font-size: 20px;
                color: #ff9344;
            }
        }
        .city-select{
            width: getvw(160);
            height: getvw(56);
            select{
                width: 100%;
                height: 100%;
                border: 1px solid #ff9344;
                // background-color: #ff9344;
            }
        }
    }
    .header-banner{
        position: relative;
        width: 100vw;
        height: getvw(287);
        overflow: hidden;
        .banner-list{
            width: 300vw;
            display: flex;
            animation: banner 5s ease infinite alternate;
            .banner-box{
                width: 100vw;
            }
        }
        .progress-bar{
            position: absolute;
            display: flex;
            width: 100vw;
            height: getvw(12);
            top:getvw(180);
            background-color: rgba(39, 39, 39,0.4);
            justify-content: center;
            background-clip: border-box;
            .bar-content{
                width: getvw(480);
                height: 100%;
                // background-color: pink;
                .moving-bar{
                    width: calc(getvw(480) / 3);
                    height: 100%;
                    background-color: rgba(228, 228, 228,0.7);
                    animation: bar 5s ease infinite alternate;
                }
            }
        }
    }
}

@keyframes banner{
    0%{
        transform: translateX(0);
    }
    10%{
        transform: translateX(0);
    }
    45%{
        transform: translateX(-100vw);
    }
    55%{
        transform: translateX(-100vw);
    }
    90%{
        transform: translateX(-200vw);
    }
    100%{
        transform: translateX(-200vw);
    }
}
@keyframes bar{
    0%{
        transform: translateX(0);
    }
    10%{
        transform: translateX(0);
    }
    45%{
        transform: translateX(calc(getvw(480) / 3));
    }
    55%{
        transform: translateX(calc(getvw(480) / 3));
    }
    90%{
        transform: translateX(calc(getvw(480) / 3 * 2));
    }
    100%{
        transform: translateX(calc(getvw(480) / 3 * 2));
    }
}

main{
    .group-purchase{
        width: 96vw;
        margin: 0 auto;
        margin-top: getvw(30);
        .group-top{
            display: flex;
            justify-content: space-between;
            .group-top-right{
                display: flex;
                align-items: center;
                i{
                    font-size: getvw(70);
                    color: #ff9344;
                }
                span{
                    font-size: getvw(40);
                    // font-weight: 600;
                }
            }
            .group-top-left{
                height: getvw(70);
                display: flex;
                align-items: center;
                i{
                    color: #ff9344;
                    font-size: getvw(40);
                }
            }
        }
        .group-btm{
            .group-btm-line{
                display: flex;
                justify-content: space-evenly;
                &:first-child{
                    margin-bottom: getvw(30);
                }
                .imgbox{
                    width: getvw(240);
                }
            }
        }
    }
}

main{
    .guest{
        width: 96vw;
        margin: 0 auto;
        margin-top: getvw(30);
        .guest-top{
            display: flex;
            justify-content: space-between;
            .guest-top-right{
                display: flex;
                align-items: center;
                i{
                    font-size: getvw(70);
                    color: #ff9344;
                }
                span{
                    font-size: getvw(40);
                    // font-weight: 600;
                }
            }
            .guest-top-left{
                height: getvw(70);
                display: flex;
                align-items: center;
                i{
                    color: #ff9344;
                    font-size: getvw(40);
                }
            }
        }
        .guest-content{
            .guest-content-item{
                display: flex;
                // justify-content: space-between;
                margin-bottom: 3vw;
                .imgbox{
                    width: getvw(210);
                }
                .guest-item-right{
                    margin-left: 1vw;
                    width: calc(95vw - getvw(210));
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .message{
                        p{
                            &:first-child a{
                                font-size: 18px;
                                color: #000;
                            }
                            &:nth-child(2){
                                color: rgb(130, 130, 130);
                                margin: getvw(16) 0;
                                font-size: 14px;
                            }
                            &:last-child{
                                color: #ff9344;
                                font-size: 20px;
                            }
                        }
                    }
                }
                .distance-saled{
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;
                    padding: 1vw 0;
                    height: 100%;
                    justify-content: space-between;
                    // align-content: space-between;
                }
            }
        }
    }
}